<template>
    <div>
        <div style="margin: 20px 20px;">
            <el-button type="primary" @click="handlerAdd">添加角色</el-button>
            <el-button type="success" :disabled="currentRow == null ? true : false" @click="roleAuthVisible=true">设置角色</el-button>
        </div>
        <el-table ref="singleTableRef" :data="roleList" highlight-current-row style="width: 100%" height="500"
            :border="true" @current-change="handleCurrentChange">
            <el-table-column type="index" width="80" label="序号" />
            <el-table-column property="name" label="角色名称" />
            <el-table-column property="create_time" label="创建时间" :formatter="resetDate" />
            <el-table-column property="auth_time" label="授权时间" :formatter="resetDate" />
            <el-table-column property="auth_name" label="授权人" />
        </el-table>

        <el-dialog v-model="addRoleDialogVisible" title="添加角色" width="500" center>
            <el-form ref="formRef" style="max-width: 600px" :model="role" label-width="auto"
                class="demo-role" :rules="rules">
                <el-form-item label="角色名称" prop="name" >
                    <el-input v-model="role.name" type="text" placeholder="请输入角色名称" />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary"  @click="addRole(formRef)">确定</el-button>
                    <el-button @click="addRoleDialogVisible = false">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 设置角色权限弹窗 -->
        <el-dialog v-model="roleAuthVisible" title="设置角色权限" width="500">
            <Auth :role="currentRow" v-if="roleAuthVisible" ref="authRef"></Auth>
            <!-- <Auth :role="currentRow" ></Auth> -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="updateData">确定</el-button>
                    <el-button @click="roleAuthVisible = false">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">

import { formatter, type FormInstance, type FormRules, type TableInstance } from 'element-plus'
import { nextTick, onMounted, reactive, ref } from 'vue'
import useRoleStore from '@/store/modules/role'
import useUserStore from '@/store/modules/user';
//引入权限子组件
import Auth from './components/Auth.vue';
import type { roleInfoData } from '@/api/role/type';
//引入时间格式化
import { formateDate } from '@/utils/dateUtils';
const resetDate = (row: any, colum: any, cellValue: number, index: number) => {
    return formateDate(cellValue)
}
const useStore = useRoleStore();
const useUser = useUserStore();
const addRoleDialogVisible = ref(false)
let currentRow = ref()
const singleTableRef = ref<TableInstance>()
//角色列表
const roleList = ref<roleInfoData[]>([])
//获取角色列表
const getRoleList = () => {
    useStore.roleList().then((res) => {
        console.log(res);
        //@ts-ignore
        roleList.value = useStore.roles;
    })
}

//表单对象ref对象
const formRef = ref()


const role = reactive({
  name:""
})

const rules = reactive<FormRules>({
  name: [{ required:true,message:"请输入角色名称", trigger: 'blur' }],
})
//添加角色对话框触发
const handlerAdd = () => { 
    addRoleDialogVisible.value = true;
    //当组件中所有的dom元素加载完毕之后，回调函数才会执行
    nextTick(()=>{
        //重置表单内容
        formRef.value.resetFields();
    })
}
const handleCurrentChange = (val: roleInfoData | undefined) => {
  currentRow.value = val
  console.log(currentRow.value);
  
}

//对话框提交并添加角色
const addRole = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
        useStore.addRole(role).then(res=>{
            addRoleDialogVisible.value = false;
            getRoleList();
        })
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}
//设置角色权限弹窗是否显示
const roleAuthVisible = ref(false)

//获取子组件
const authRef = ref()

const updateData = () => {
    //获取子组件传递过来的权限数据
    const newRole = authRef.value.getMenus();

    
    currentRow.value.menus = newRole.value.menus;
    currentRow.value.name = newRole.value.name;
    currentRow.value.auth_name = useUser.user?.name;
    
    
    // 发送更新请求
    useStore.updateRole(currentRow.value).then((res)=>{
        roleAuthVisible.value = false;
        getRoleList();
    })
}

onMounted(() => {
    getRoleList()
})
</script>

<style scoped></style>